<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <!-- <svg-icon :class="{ 'is-active': !foldState }" class="hamburger" name="hamburger" :size="20"></svg-icon> -->
    <i class="el-icon-s-unfold hamburger" :class="{ 'is-active': !foldState }"></i>
  </div>
</template>

<script lang="ts" setup>
import { useMenuStore } from '@/stores/menu';
import { storeToRefs } from 'pinia';
const menuStore = useMenuStore()
const { foldState } = storeToRefs(menuStore)
defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['toggleClick'])
const toggleClick = () => {
  emit('toggleClick')
}
</script>

<style lang="scss" scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: $black2;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
